<template>
	<view style="background-color: #f5f5f5;">
		<view class="topBox">
			<view class="questionList" @click="questionList" ><u-icon name="order" size="20" style='margin-right: 20rpx;'/>答题卡</view>
			<view class="timeColor" ><u-icon v-if='shenTime !== undefined' name="clock" size="20" style='margin-right: 10rpx;'/>{{shenTime?'倒计时:'+ shenTime:''}}</view>
		</view>
		
		<view class="bigBox" :style="{'height':sys.height_rpx-230+'rpx'}">
			<block v-if="list.length > 0">
				<view class="tag">
					{{list[index].type==1?'单选':list[index].type==2?'判断':'多选'}}
				</view>
				<view class="title">
					{{index+1}}  、  {{list[index].title}}   ({{list[index].score}}分)
					</view>
				<view 
					v-for="(itm, idx) in list[index].question_answer_list" 
					:key='itm.id'
				>
					<view
						@click="answerQuestion(itm)"
						:class="list[index].answer_sort.split(',').map(e=>parseInt(e)).includes(parseInt(itm.sort)) ?'activeanswer unactiveanswer':'unactiveanswer'"
					>	
						<view 
							:class="list[index].answer_sort.split(',').map(e=>parseInt(e)).includes(parseInt(itm.sort))?'active':'unactive'"
						>
							<u-icon v-if="list[index].answer_sort.split(',').map(e=>parseInt(e)).includes(parseInt(itm.sort))" name="checkbox-mark" color="white" size="18"/>
							<text v-else style="height: 50rpx;width: 50rpx;" >{{itm.option.substring(0,1)}}</text>
						</view>
						<text style="height: 50rpx;margin-left: 10rpx;">{{itm.option.substring(2,itm.option.length)}}</text>
					</view>
				</view>
				<view class="buttom">
					<view  
						v-if='preShow'
						class="overOrchangeQuestion"
						@click="preQuestion"
					>上一题</view>
					<view 
						v-if='nextShow'
						class="overOrchangeQuestion"
						@click="netxQuestion"
					>{{index==49?"提交试卷":"下一题"}}</view>
				</view>
			</block>
			
		</view>
	</view>
	
</template>


<script>
	
	import request from "@/pagesB/common/js/request/allRequest.js"
	import { routerParamUrl } from '@/common/js/public/utils.js';
	export default {
		data() {
			return { 
				list:[],
				index:0,
				sys:{},
				preShow:false,
				nextShow:true,
				paper_id:undefined,
				allTime:undefined,
				shenTime:undefined,
				timeOut:null,
				work_id:undefined
			}
		},
		onLoad(option){
			this.work_id=option.work_id
		},
		onShow() {
			if(!this.paper_id){
				this.getPaperId()
			}else{
				request.getQuestionList({
					data:{paper_id:this.paper_id},
					success:(res)=>{
						this.list=res
						this.detail=this.list[this.index]
						if(this.index>0){
							this.preShow=true
							this.nextShow=true
						}else{
							this.preShow=false
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			}
			
		},
		// 页面初次渲染完成
		onReady() {
			// 获取系统信息
			uni.$focus.systemInfo((sysD)=>{ this.sys = sysD;});
		},
		onUnload(){
			 clearInterval(this.timeOut)
			 uni.$off('index')
		},
		methods: {
			/**
			 * @description 获取答题剩余时间
			 */
			timeLast(){
				request.getTimeLast({
					data:{paper_id:this.paper_id},
					success:(res)=>{
						this.allTime=res.paper_time
						this.time()
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			/**
			 * @description 提交试卷
			 */
			handPaper(){
				request.handPaper({
					data:{paper_id:this.paper_id},
					success:(res)=>{
						wx.navigateTo({
							url:`/pagesB/pages/newTestResult/index?${routerParamUrl(res)}`,
						})
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			/**
			 * @description 时间转换  s=>分秒
			 */
			time(){
				this.timeOut = setInterval(()=>{
					let minute
					let second 
				   if(this.allTime){
					   this.allTime=this.allTime-1;
					   minute = parseInt(this.allTime/60);
					   second = parseInt(this.allTime%60);
					   this.shenTime= minute+'分'+ second + '秒'
				   }else{
					   clearInterval(this.timeOut)
					   this.shenTime='0分0秒'
					   this.handPaper()
					}
				},1000);
			},
			/**
			 * @description 跳转答题卡
			 */
			
			questionList(){
				uni.navigateTo({
					url:`/pagesB/pages/newTestPaperQuestionList/index?paper_id=${this.paper_id}&number=${this.index}`
				})
				uni.$on('index',(item)=>{
					this.index=item
				})
			},
			/**
			 * @param {Object} item
			 */
			answerQuestion(item){
				if(this.list[this.index].type!=3){//单选题,判断
					this.answer(item,0)
				}else if(this.list[this.index].type==3){//多选题
					this.answer(item,1)
				}
			},
			/**
			 * @param {Object} item 点击的当前题
			 * @param {Object} type 类型 0单选和判断,1位多选
			 */
			answer(item,type){
				let oldList=this.list
				let sort
				if(type){
					sort=this.list[this.index].answer_sort.split(',').filter(itm=>itm).map(itm => parseInt(itm))
					if(sort.includes(parseInt(item.sort))){
						sort=sort.filter(itm => itm!=item.sort)
					}else{
						sort.push(item.sort)
					}
					this.list[this.index].answer_sort=sort.toString()
				}
				!type&&(this.list[this.index].answer_sort=item.sort.toString())
				request.answerQuestion({
					data:{
						paper_id:this.paper_id,
						fill_id:this.list[this.index].id,
						sort:!type?item.sort.toString():sort.toString()
					},
					success:(res)=>{ },
					fail:(err)=>{this.list=oldList }
				})
			},
			
			
			//上一题
			preQuestion(){
				if(this.index>0){
					this.index-=1
					this.preShow=true
					this.nextShow=true
				}else{
					this.preShow=false
				}
			},
			//下一题
			netxQuestion(){
				this.ownAnswer=this.list[this.index].answer_sort.split(',').map(item=>parseInt(item))
				if(this.index<49){
					this.index+=1
					this.nextShow=true
					this.preShow=true
				}else{
					let length=this.list.filter(item=>!item.answer_sort).length
					if(length){
						uni.showModal({
							title:'提示',
							content:`你有${length}道题未答,会影响你的结果和成绩,是否直接交卷`,
							cancelText:'直接交卷',
							confirmText:'返回作答',
							cancelColor:'#576B95',
							confirmColor:'#000000',
							success:({confirm})=>{
								if(!confirm){
									this.handPaper()
								}
							}
						})
					}else{
						this.handPaper()
					}
				}
			},
			//组卷并获取试卷
			getPaperId(){
				let sentry_pid = uni.getStorageSync("eduInfo").sentryPid
				let type = 3
				if(uni.getStorageSync("eduInfo").sentryPid == 5){
					 type = 3
				}else if (uni.getStorageSync("eduInfo").sentryPid == 3){
					 type = 4
				}
				request.createWorkPaper({
					data:{
						type,
						sentry_pid 
					},
					success:({paper_id})=>{
						this.paper_id=paper_id
						this.timeLast()
						request.getQuestionList({
							data:{paper_id},
							success:(res)=>{
								this.list=res
								this.detail=this.list[this.index]
							},
							fail:(err)=>{
								console.log(err);
							}
						})
					},
					fail:(err)=>{
						this.$u.toast('获取试卷失败');
					}
				})
			}
		}

	}
</script>

<style lang="less" scoped>
.bigBox{
	overflow: auto;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 0 40rpx;
}
.tag{
	width: 100rpx;
	text-align: center;
	border-radius: 14rpx 0 14rpx 0;
	color: white;
	font-size: 24rpx;
	height: 40rpx;
	line-height: 40rpx;
	background-color: #3978f2;
	margin-bottom: 20rpx;
}
.topBox{
	
	background-color: white;
	display: flex;
	justify-content: space-around;
	font-size: 28rpx;
	padding: 20rpx 0;
}
.active{
	text-align: center;
	display: inline-block;
	width: 40rpx;
	background-color:#1890FF ;
	min-height: 40rpx;
	border-radius: 50%;
	line-height: 40rpx;
}
.unactive{
	line-height: 40rpx;
	text-align: center;
	display: inline-block;
	width: 40rpx;
	background-color:white ;
	min-height: 40rpx;
	border-radius: 50%;
}
.overOrchangeQuestion:active{
	background-color: #1890FF;
}
.questionList:active{
	background-color: #1890FF;
	color: white;
}
.questionList{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70rpx;
	width: 300rpx;
	border:2rpx solid #2979ff;
	border-radius: 35rpx;
	text-align: center;
	line-height: 70rpx;
	color: #2979ff;
}
.timeColor{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300rpx;
	height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	line-height: 70rpx;
	border:2rpx solid #ff7878;
	color: #ff7878;
}

.title{
	font-size: 30rpx;
	font-weight: 500;
}
.dispear{
	display: none;
}
.unactiveanswer{
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 0 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx 0;
	min-height: 80rpx;
	line-height: 80rpx;
}
.activeanswer{
	color: #2979ff;
}
.buttom{
	background-color:#fff;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	justify-content: space-around;
	display: flex;
	height: 100rpx;
	view{
		border-radius: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		width: 35%;
		background-color: #2979ff;
	}
}
</style>
